<template>
  <div>
    <uni-swipe-action>
      <uni-swipe-action-item 
        v-for="(val, index) in articleValues" :key="index" 
        :right-options="options" 
        @click="click(val.id)" 
      >
      <view class="item" @click="goDetail(val.id)">
          <view class="item_left">
            <img v-if="val.topic" :src="val.topic" alt="">
          </view>
          <view class="item_right">
            <view class="title">{{val.title}}</view>
            <p style="font-size:12px;">{{val.summary}}</p>
            <p style="text-align:right">{{val.createTime}}</p>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <u-modal v-model="show" @cancel="cancel" @confirm="confirm" :show-cancel-button="true" :content="content"></u-modal>
    <u-toast ref="uToast" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      articleValues:[],
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ],
      id:"",
      show: false,
			content: '确定要删除该篇文章吗？'
    }
  },
  mounted() {
    this.initFn()
  },
  methods: {
    goDetail(id){
      uni.navigateTo({
        url: './articleDetail?id='+id
      });
    },
    cancel(){
      this.show = false
    },
    confirm(){
      let token = this.$store.state.token
      uni.request({
        url: 'http://39.106.224.223:8088/cms/editior/essay/delete',
        header:{
          'content-type':'application/json',
          'Authorization':token
        },
        data:{ essayId:this.id },
        method:'GET',
        success:res=>{
          if (res.data.code == 200) {
            this.$refs.uToast.show({
              title: "删除成功",
              type: "success"
            });
            this.initFn()
          }
        }
      })
    },
    click(id) {
      this.id = id
      this.show = true;
    },
    initFn(){
        let token = this.$store.state.token
        uni.request({
          url: 'http://39.106.224.223:8088/cms/editior/essay/queryAll',
          header:{
            'content-type':'application/json',
            'Authorization':token
          },
          method:'GET',
          success:res=>{
            console.log(res)
            if (res.data.code == 200) {
              this.articleValues = res.data.data
              this.articleValues.forEach(element => {
                element.show = false
              });
            }
          }
        })
    }
  },
}
</script>
<style lang="scss">
.item{
      width: 100%;
      height: 300rpx;
      padding: 10rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f3f3f3;
      .item_left{
        width: 240rpx;
        height: 300rpx;
        padding: 40rpx 0;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .item_right{
        flex: 1;
        height: 300rpx;
        padding: 10rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title{
          font-size: 14px;
          font-weight: 700;
          padding: 20rpx 0;
        }
      }
    }
  
</style>